<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_01</title>
</head>
<body>
    <div id="app">
        <!-- 1. mustachae 语法，仅支持表达式不支持语句。例如：{{var tmp = 1;}} 不支持（因为这是语句） -->
        <!-- 支持动态绑定，修改 message 的值页面会跟着变化 -->
        {{ message }} {{message + "拼接我"}}
        <!-- 2. vue 指令, 通过 v-bind 绑定 id 的值为 message -->
        <div v-bind:id="message"></div>
        <!-- 3. v-bind:id 可以简写为 :id -->
        <div :id="message"></div>
    </div>
    <script src="./script/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>